<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/layui.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html {
            font-size: 100px;
        }

        /* 用的800 */

        @media(max-width: 375px) {
            html {
                font-size: 46.8px;
            }
        }


        @media(max-width: 360px) {
            html {
                font-size: 45px;
            }
        }

        @media(max-width: 768px) {
            html {
                font-size: 96px;
            }
        }

        @media(max-width: 800px) {
            html {
                font-size: 100px;
            }
        }

        .header {
            height: 5rem;
            background-color: rgb(242, 242, 242);
        }

        .row {
            width: 8rem;
            height: 0.75rem;
            margin-top: .1rem;
            background-color: rgb(255, 255, 255);
            /* background-color: slategray; */
        }

        .row div {
            float: left;
        }

        .nav_left {
            /* 总共7.5rem */
            width: 1rem;
            color: rgb(255, 149, 149);
            font-size: 0.35rem;
            text-align: center;
            text-indent: .04rem;
            /* background-color: salmon; */
        }

        .nav-left-font {
            font-size: .15rem;

        }

        .nav_medium {
            width: 6rem;
            /* background-color: skyblue; */
            text-align: center;

        }

        .input_media {
            /* display: inline-block; */
            height: .35rem;
            width: 5.5rem;
            font-size: .2rem;
            margin-top: .08rem;
            border-radius: .2rem;
            text-indent: .35rem;
            background-color: rgb(243, 243, 243);
            /* color: rgb(193, 193, 193); */
        }

        #search {
            position: relative;
            left: .3rem;
            color: rgb(153, 153, 153);
        }

        .nav_right {
            margin-top: .1rem;
            width: 1rem;
            /* background-color: slateblue; */
            height: .35rem;
        }

        #chat {
            font-size: .35rem;
            color: rgb(255, 124, 124);
        }

        #shop {
            font-size: .35rem;
            color: rgb(255, 124, 124);
            margin-left: .15rem;
        }

        .img-index {
            width: 8rem;
            height: 4rem;
        }

        .main_choose {
            width: 8rem;
            height: 2rem;
            /* background-color: #f7a3a3; */
            background-color: rgb(255, 255, 255);
        }

        .main_choose div {

            float: left;
        }

        .layui-anim-upbit {
            width: 2rem;
            height: 2rem;
            border-radius: 50%;
            /* background-color: royalblue; */
            margin: 0 auto;
        }

        .main-choose-index {
            width: 1rem;
            height: 1rem;
            border-radius: 50%;
            margin-left: .75rem;
            margin-top: .5rem;
            /* background-color: salmon; */

        }

        #menp {
            /* width: 1rem;
           height: 1rem;
           border-radius: 50%; */
            /* margin-left: .25rem; */
            /* margin-top: 1rem; */
            font-size: .5rem;
            /* margin-top: .25rem; */
            /* background-color: springgreen; */
            border-radius: 50%;

        }

        #boor-boot div {
            float: left;
        }

        .data-font {
            font-size: .2rem;
            /* margin-left: .15rem; */
            margin-top: .1rem;
        }

        .bottom-main {
            height: 3rem;
            width: 4rem;
            background-color: wheat;
            box-shadow: 5px 20px 20px rgb(142, 142, 142);
        }

        .bottom-main img {

            box-shadow: 30px 30px 50px rgb(142, 142, 142);

        }

        .bottom-right-foot {
            width: 4rem;
            height: 1.5rem;
            background-color: rgb(142, 142, 142);
            border-bottom: .041rem solid rgb(142, 142, 142);

        }

        #img-pa {
            width: 3.959rem;
            height: 1.5rem;
            border-left: .041rem solid rgb(142, 142, 142);
            margin-bottom: .041rem solid rgb(142, 142, 142);
        }

        .bot-fot {

            width: 8rem;
            height: 2rem;
        }

        #bot-img {
            width: 8rem;
            height: 2rem;
        }

        #clear {
            clear: both;
            height: .5rem;
            width: 8rem;
            content: "";
        }

        .layui-tab-title {
            width: 8rem;
            position: fixed;
        }

        .layui-tab-title li {
            width: 1.3rem;
            position: sticky;
            margin-bottom: 0;
        }

        .cont {
            width: 8rem;
            content: "";
            height: 1rem;
            background-color: rgb(153, 153, 153)
        }

        #d1 {
            font-size: .233rem;
        }

        #d2 {
            font-size: .233rem;
        }

        #d3 {
            font-size: .233rem;
        }

        #d4 {
            font-size: .233rem;
        }

        #d5 {
            font-size: .233rem;
        }
    </style>
</head>

<body>
    <div class="header">
        <nav class="row">
            <div class="nav_left">郑州
                <i class="layui-icon layui-icon-triangle-d"></i>
            </div>
            <div class="nav_medium">
                <i class="layui-icon layui-icon-search " id="search"></i>
                <input class=" input_media" type="text" name="search" placeholder="搜索商家、套餐、话题">
            </div>
            <div class="nav_right">
                <i class="layui-icon layui-icon-chat" id="chat"></i>
                <!-- layui-icon-cart-simple -->
                <i class="layui-icon layui-icon-cart-simple" id="shop"></i>
            </div>
        </nav>
        <div class="layui-carousel" id="test">
            <div carousel-item>
                <div><img class="img-index" src="./img/yidong.jpg" alt=""></div>

                <div><img class="img-index" src="./img/1.jpg" alt=""></div>
                <div><img class="img-index" src="./img/2.jpg" alt=""></div>
                <div><img class="img-index" src="./img/3.jpg" alt=""></div>
            </div>
        </div>
        <div class="main_choose">
            <div class="layui-anim layui-anim-upbit">
                <div class="main-choose-index"> <i class="layui-icon layui-icon-cart " id="menp">
                    </i><br>
                    <div class="data-font">找商家</div>
                </div>
            </div>

            <div class="layui-anim layui-anim-upbit">
                <div class="main-choose-index"> <i class="layui-icon layui-icon-cart " id="menp">
                    </i><br>
                    <div class="data-font">找商家</div>
                </div>
            </div>
            <div class="layui-anim layui-anim-upbit">
                <div class="main-choose-index"> <i class="layui-icon layui-icon-cart " id="menp">
                    </i><br>
                    <div class="data-font">找商家</div>
                </div>
            </div>
            <div class="layui-anim layui-anim-upbit">
                <div class="main-choose-index"> <i class="layui-icon layui-icon-cart " id="menp">
                    </i><br>
                    <div class="data-font">找商家</div>
                </div>

            </div>

        </div>
        <div id="boor-boot">
            <div class="bottom-main">
                <img src="./img/礼品采购.jpg" alt="">
            </div>
            <div class="bottom-right-foot">
                <img id="img-pa" src="./img/婚车.jpg" alt="">
            </div>
            <div class="bottom-right-foot">
                <img id="img-pa" src="./img/拍摄.jpg" alt="">
            </div>
        </div>
        <div id="clear"></div>
        <div class="bot-fot"> <img id="bot-img" src="./img/婚礼用酒.jpg" alt=""></div>
        <div class="cont"></div>
        <div class="layui-tab" lay-filter="test1">
            <ul class="layui-tab-title">
                <li class="layui-this" lay-id="111">
                    <i class="layui-icon layui-icon-home" id="d1"></i>
                </li>
                <li lay-id="222">
                    <!-- layui-icon-list -->
                    <i id="d2"class="layui-icon layui-icon-list" ></i>
                </li>
                <li lay-id="333">
                    <!-- layui-icon-dialogue -->
                    <i class="layui-icon layui-icon-dialogue" id="d3"></i>
                </li>
                <li lay-id="444">
                    <i class="layui-icon layui-icon-util" id="d4"></i>

                    <!-- layui-icon-util -->
                </li>
                <li lay-id="555">
                    <!-- layui-icon-username -->
                    <i class="layui-icon layui-icon-username" id="d5"></i>

                </li>
            </ul>

        </div>
    </div>


</body>
<script src="../layui.all.js"></script>
<script>
    layui.use('carousel', function () {
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test'
            , width: '8rem' //设置容器宽度
            , arrow: 'always' //始终显示箭头
            , height: '3rem'
            //,anim: 'updown' //切换动画方式
        });
    });
</script>

</html>